<template>
  <a-modal
    :visible="visible"
    :title="title"
    @cancel="() => { $emit('cancel') }"
    @ok="() => { $emit('submit') }"
  >
    <a-form layout="vertical" :form="form">
      <a-form-item label="id" style="display: none" >
        <a-input
          v-decorator="[
            'id',
            {
              initialValue: initialFormValue == null ? '' : initialFormValue.id
            }
          ]"
        />
      </a-form-item>
      <a-form-item label="用户" >
        <a-select
          show-search
          v-decorator="[
            'userId',
            {
              initialValue: initialFormValue == null ? '' : initialFormValue.userId,
              rules: [],
            }
          ]"
          placeholder="请输入手机号"
          style="width: 200px"
          :default-active-first-option="false"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          @search="handleSearch"
          @change="handleChange"
        >
          <a-select-option v-for="d in userList" :key="d.id">
            {{ d.nickName }} {{ d.mobile }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="备注" >
        <a-input
          v-decorator="[
            'remark',
            {
              initialValue: initialFormValue == null ? '' : initialFormValue.remark,
              rules: [],
            }
          ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>

import { requestBigCustomerMobileList } from '@/api/example/example'

export default {
  components: {

  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    formModalData: {
      type: Object,
			default: null
    }
  },
  data () {
    return {
      title: this.formModalData.title,
      initialFormValue: this.formModalData.formValue,
      userList: []
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  methods: {
    initUser (user) {
      this.userList.push(user)
    },
    handleSearch (value) {
      if (value == null || value.length === 0) {
        return
      }
      requestBigCustomerMobileList({
        phone: value
      }).then(res => {
        this.userList = res
      })
    },
    handleChange (value) {

    }
  }
}
</script>
